<template>
  <div>
    <canvas id="three"></canvas>
  </div>
</template>
<script>


import * as THREE from 'three'
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import {GUI} from "three/examples/jsm/libs/lil-gui.module.min"
import {initThree} from "../utils/enviromentUtil";
export default {
  data() {
    return {
      renderer: "",
      scene: "",
      camera: "",
      // 轨道控制器
      orbitControls: "",
      // 立方体模型
      cube: ""
    }
  },
  async mounted() {
    this.initThree()
    const model = await this.loadModel()
    this.playAnimation(model)
    this.initGUI()
  },
  methods: {
    initThree() {

      initThree.call(this)
    },
    loadModel() {


      const loader = new GLTFLoader()

      return new Promise(resolve => {
        loader.load('static/ocean_texure_cube.gltf', (gltf) => {


          resolve(gltf.scene)

        }, undefined, function (error) {

          console.error(error);

        });
      })


    },

    playAnimation(model) {

      //const geometry = new THREE.BoxGeometry(1, 1, 1);

      model.material = new THREE.MeshBasicMaterial({color: 0x00ff00});
      this.cube = model//new THREE.Mesh(model, material);


      this.scene.add(this.cube);

      const animate = () => {

        this.renderer.render(this.scene, this.camera)

        this.cube.rotation.x += 0.01;
        this.cube.rotation.y += 0.01;

        this.orbitControls.update()

        requestAnimationFrame(animate)
      }
      animate()

    },

    initGUI() {

      const gui = new GUI();

      const eventObj = {
        enterFullScreen() {
          document.body.requestFullscreen()
          console.log("进入全屏")
        },
        exitFullScreen() {
          document.exitFullscreen()
          console.log("已退出全屏")
        }
      }

      gui.add(eventObj, "enterFullScreen").name("进入全屏")
      gui.add(eventObj, "exitFullScreen").name("退出全屏")

      const cubeFolder = gui.addFolder("立方体设置")

      //  add() 方法的第二个参数为 第一个参数对象中的属性
      // gui.add() 会自动判断第二个参数是第一个参数的 方法还是 属性
      // 如果是 方法，会直接执行
      // 如果是 数值，会使用第三个和第四个参数来限定第二个属性可调节的上下限
      cubeFolder.add(this.cube.position, "x", -50, 50).name("x轴")
      cubeFolder.add(this.cube.position, "y", -50, 50).name("y轴")
      cubeFolder.add(this.cube.position, "z", -50, 50).name("z轴")

      const cubeColor = {
        color: "#00ff00"
      }

      cubeFolder.addColor(cubeColor, "color").onChange(color => {
        console.log("颜色已改为", color)

        this.cube.material.color.set(color)

      })
    },
  },
}
</script>

<style scoped>
#three {
  width: 100%;
  height: 100%;
}
</style>
